<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            display: flex;
            /* 设置弹性盒子 里面的元素会变成块 */
            width: 80%;
            height: 800px;
            /* flex-wrap: wrap; */
            background-color: chartreuse;
            /* 设置在父盒子内 */

            /* flex-direction  设置主轴方向 */
            /* row          从左往右  */
            /* row-reverse 从右往左 */
            /* column       从上往下 */
            /* column-reverse  从下往上*/
            /* flex-direction: column-reverse ; */


            /* justify-content  设置主轴排列方式 */
            /* flex-start   从头开始排 */
            /* flex-end     从尾开始 */
            /* center       居中 */
            /* space-between  头尾放一个  中间平分 */
            /* space-around   将所有空出部分平分给每一个的左右边距 */
            /* justify-content: space-around; */

            /* align-items   设置侧轴排列方式 (一般来说修饰不换行)*/
            /* flex-start   从头开始排 */
            /* flex-end     从尾开始 */
            /* center    居中（注意不是垂直居中） */
            /* stretch   在侧轴上拉伸  （设置这个属性 子元素不能有高） */
            /* align-items:flex-start ; (一般来说修饰不换行)*/
           

            /* align-content 设置侧轴排列方式 （一般修饰多行） */
            /* center  居中 */
            /* flex-start   从头开始排 */
            /* flex-end     从尾开始 */
             /* stretch   在侧轴上拉伸  （设置这个属性 子元素不能有高） */
             /* space-between  头尾放一个  中间平分 */
            /* space-around   将所有空出部分平分给每一个的左右边距 */
            align-content: flex-start;

            /* flex-wrap: wrap;  换行*/
            /* nowrap  默认  不换行 */
            /* wrap   换行 保持原来的宽度  如果放不下就会换行 */
            /* flex-wrap: wrap; */

            /* flex-wrap  和 flex-direction 的合体 */
            flex-flow: nowrap row;
        }

        .div1 div{
            /* 行内元素 */
            background-color: red;
            color: white;
            font-size: 25px;
            width: 200px;
            height: 100px;
            margin: 5px;

            /* 子项常见属性 */
            /* flex: 1; */
            /* 将剩余部分 按照比例分配给各个子项 值是一个数字*/
        }
        .div1 div:nth-child(3){
            /* flex: 1; */
            /* align-self 设置单个元素侧轴上的排列方式 */
            /* align-self: center; */

            /* order  设置排列顺序 */
            /* 每个元素默认是0   值越小越前面 */
            order: -1;

        }
        .div1 div:nth-child(2){
            order: -2;
        }
        .div1 div:nth-child(1){
            order: 1;
        }


    </style>
</head>
<body>
    
    <div class="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>